import axios from 'axios';
import React, {useContext, useEffect, useState} from 'react';
import {Card, Toast, Button, Rate, Space, Avatar, List, Grid, Tag} from 'antd-mobile'
import {useNavigate} from "react-router-dom";
import {UserContext} from "../context/userContext";

const Mine = ({postId: id}) => {
  const [avatar, setAvatar] = useState('');
  const [name, setName] = useState('');
  const [admin, setAdmin] = useState(false);
  const [credits, setCredits] = useState('4.5');
  const [stars, setStars] = useState('4.5');


  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const navigate = useNavigate();
  const { currentUser } = useContext(UserContext);
  const token = currentUser?.token;

  useEffect(() => {
    if (!token) {
      navigate('/login');
    }
  }, [token, navigate]);

  useEffect(() => {
    const getUser = async () => {
      if (!currentUser?.id) return;
      try {
        const response = await axios.get(
            `${process.env.REACT_APP_BASE_URL}/users/${currentUser.id}`,
            { withCredentials: true, headers: { Authorization: `Bearer ${token}` } }
        );

        const { name, email, avatar, admin, credits, stars } = response.data;
        setName(name);
        setEmail(email);
        setAdmin(admin);
        setAvatar(avatar);
        setCredits(credits?credits:0.0);
        setStars(credits?credits:0.0)
      } catch (error) {
        console.log(error);
      }
    };

    getUser();
  }, [currentUser?.id, token]);

  const onClick = () => {
    navigate('/profile')
  }
  const onClickUserInfo = () => {
    navigate('/userinfo');
  }
  const goCredits = () => {
    navigate('/credits');
  }
  const goMessage = () => {
    navigate('/message');
  }
  const goUserPosts = () => {
    navigate(`${`/posts/users/${currentUser?.id}`}`)
  }
  return (
      <section>
        {error && <p className="error">{error}</p>}

        <div className="header2">
        </div>

        <div className="part">
          {admin && <Tag style={{'float': 'right', 'position': 'relative', 'top': '20px'}}
                         color={"rgba(80, 62, 157, 1)"}>管理员</Tag>}

          <Card onClick={onClickUserInfo}>

            <Space block direction='horizontal' align="center">
              <Avatar style={{'--size': '100px'}}
                      src={`${process.env.REACT_APP_ASSETS_URL}/uploads/${avatar}`} alt=""/>
              <Space block direction='vertical'>
                <Space block>
                  <span className="text_9">{name}</span> <span className="text_10">创建者</span>
                </Space>
                <Space>
                  <span className="text_10">当前积分: <span className="text_4">{credits}</span></span>
                </Space>

                <Space>
                  <span className="text_10">当前评分: <Rate readOnly value={Number(stars)}/></span>
                </Space>
              </Space>
            </Space>

          </Card>
        </div>

        <div className="part">
          <Card onClick={onClick}>
            <List style={{'--border-top': 'none', '--border-bottom': 'none'}}>
              <List.Item prefix={<img
                  className="label_3"
                  src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG1df6f0d79b0448e5a893d60cd89190d9.png"}
                  alt="info"/>} onClick={() => {
              }}>
                <Space block direction='vertical'>
                  <span className="text_9">信息完善</span>
                  <span className="text_10">完善信息能让你更加有优势被选中</span>
                </Space>
              </List.Item>
            </List>
          </Card>
        </div>

        <div className="part">
          <Card>
            <Grid style={{'--gap': 'vertical'}} columns={3} gap={3}>
              <Grid.Item onClick={goMessage}>
                <Space block direction='vertical' align='center'>
                  <div className="image-wrapper_1 flex-col">
                    <img
                        className="thumbnail_1"
                        src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGb47a05bb5db895be8f8250638beb40cd.png"}
                        alt=""/>

                  </div>
                  <span className="text_7">我的消息</span>
                </Space>
              </Grid.Item>
              <Grid.Item onClick={goCredits}>
                <Space block direction='vertical' align='center'>
                  <div className="image-wrapper_2 flex-col">
                    <img
                        className="thumbnail_1"
                        src={"https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/df178ab2ea4d4798ac63db9eddfb8306_mergeImage.png"}
                        alt=""/>

                  </div>
                  <span className="text_7">我的积分</span>
                </Space>
              </Grid.Item>
              <Grid.Item onClick={goUserPosts}>
                <Space block direction='vertical' align='center'>
                  <div className="image-wrapper_13 flex-col">
                    <img
                        className="thumbnail_1"
                        src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG6edb76bc46df96b1082818381aa65b6a.png"}
                        alt=""/>

                  </div>
                  <span className="text_7">我发布的项目</span>
                </Space>
              </Grid.Item>
            </Grid>
          </Card>
        </div>

        {admin && <div className="part">
          <Card>
            <List style={{'--border-top': 'none', '--border-bottom': 'none'}}>
              <List.Item prefix={<img
                  className="label_3"
                  src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG1df6f0d79b0448e5a893d60cd89190d9.png"}
                  alt="info"/>} onClick={() => {
                    navigate(`/posts/admin/${currentUser.id}`)
              }}>
                <Space block direction='vertical'>
                  <span className="text_9">待审核的项目</span>
                </Space>
              </List.Item>
            </List>
          </Card>
        </div>}

      </section>
  )
}

export default Mine
